.shop-feature {
  .adv {
    .adv-box {
      height: 100%;
      background-image: url("/assets/images/page/business/bg-01.png");
      background-position: bottom right;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      transition: all 0.3s ease-out;
      padding: 1.5rem 1rem 7rem 1rem;

      ul {
        list-style: none;
        padding-left: 0;
        color: var(--zcu-gray-600);
        li {
          margin-bottom: 0.5rem;
        }
      }
      &:hover {
        background-image: url("/assets/images/page/business/bg-hover-01.png");
        transform: translateY(-10px);
        h4 {
          color: var(--zcu-focus-color);
        }
      }
    }
  }
}

.shop-list {
  .row {
    box-shadow: var(--zcu-box-shadow-sm);
  }

  .shop {
    background-color: var(--zcu-focus-color);
    position: relative;

    h2 {
      color: var(--zcu-gray-100);
    }

    hr {
      border-color: var(--zcu-gray-300);
    }

    p {
      color: var(--zcu-gray-200);
    }

    &::before {
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background-image: url("/assets/images/page/business/shape-m-w.png");
      background-position: right bottom;
      background-size: contain;
      background-repeat: no-repeat;
      transition: all 0.3s ease-out;
    }

    transition: all 0.3s ease-out;
    &:hover {
      background-color: rgba(var(--zcu-tertiary-bg-rgb), var(--zcu-bg-opacity));

      h2 {
        color: var(--zcu-focus-color);
      }

      hr {
        border-color: var(--zcu-gray-500);
      }

      p {
        color: var(--zcu-gray-700);
      }
    }

    &:hover::before {
      background-image: url("/assets/images/page/business/shape-m.png");
    }
  }
}
